<template>
  <div class="search">
    <!-- 头部搜索框 -->
    <!-- v-model：搜索框中双向绑定的值 -->
    <!-- show-action：显示右侧的按钮 -->
    <!-- search：点击回车时触发的事件 -->
    <!-- cancel: 点击取消按钮时触发 -->
    <van-search @input="think" background="#3296fa" v-model="value" show-action @search="onSearch" @cancel="onCancel" />
    <!-- 联想区域 -->
    <van-cell-group v-if="thinklist.length !== 0">
      <van-cell title="联想区域" />
      <van-cell @click="onSearch(item.oldItem)" v-for="(item, index) in thinklist" :key="index" icon="search">
        <template #title>
          <div v-html="item.newItem"></div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 搜索历史 -->
    <van-cell-group v-else>
      <van-cell title="历史记录">
        <template #default>
          <van-icon @click="delAll" name="delete" />
        </template>
      </van-cell>
      <van-cell @click="onSearch(item)" v-for="(item, index) in historyList" :key="index" icon="browsing-history-o" :title="item">
        <template #default>
          <van-icon @click.stop="del(index)" name="cross" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 导入搜索的方法
import { apiThink } from '../../api/search'
// 导入操作 local 的方法
import { localSet, localGet, localDel } from '../../utils/mylocal'
export default {
  data () {
    return {
      // 搜索框中的值
      value: '',
      // 保存联想结果
      thinklist: [],
      // 全局定时器
      timer: null,
      // 保存搜索历史
      historyList: localGet('history') || []
    }
  },
  methods: {
    // 清除所有的数据
    delAll () {
      // 提示框
      this.$dialog.confirm({
        title: '警告',
        message: '您是否确定删除历史记录'
      }).then(() => {
        // 点击确定时触发的函数
        // 将 historyList 清空
        this.historyList = []
        // 将本地的记录也清除
        localDel('history')
      }).catch(() => {
        // 点击取消时触发的函数
        console.log('取消')
      })
    },
    // 删除历史数据
    del (index) {
      // 删除历史数据
      this.historyList.splice(index, 1)
      // 将数据重新保存到本地
      localSet('history', this.historyList)
    },
    // 联想方法
    think () {
      // 清除之前的定时器
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        // 判断输入框中的内容是否为空
        if (this.value.trim().length === 0) {
          // 说明内容为空
          // 将联想框中的内容清空
          this.thinklist = []
          // 不再发送请求
          return // 结束后续的代码
        }
        // 发送请求到服务器得到联想的数据
        var res = await apiThink(this.value)
        this.thinklist = res.data.data.options
        // 遍历 thikList ，将里面的所有元素中的关键字改为红色
        this.thinklist = this.thinklist.map(item => {
          return {
            oldItem: item,
            newItem: item.replace(this.value, `<span style="color: red">${this.value}</span>`)
          }
        })
      }, 500)
    },
    // 点击回车时触发的事件(如果在手机上：点击完成按钮触发)
    onSearch (value) {
      // value：就是输入框中的内容
      // 跳转到搜索结果页面：将搜索的关键字传入到目标页面中
      this.$router.push('/searchResult?key=' + value)
      // 将搜索的结果保存到 historyList 中
      this.historyList.unshift(value)
      // 去重
      this.historyList = [...new Set(this.historyList)]
      // 将 historyList 保存到 localstorage 中
      localSet('history', this.historyList)
    },
    // 点击取消按钮时触发
    onCancel () {
      console.log('onCancel')
    }
  }
}
</script>

<style lang="less">
.search {
  .van-search__action {
    color: #fff;
  }
  .van-search__action:active {
    background-color: #ccc;
  }
}
</style>
